<%@ page language="java" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/common.jsp"%>
<html lang="en">
  <head>
  	<link href="${pageContext.request.contextPath}/resource/css/def/datatables/css/jquery.dataTables.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/resource/css/def/ztree/metro.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/resource/css/def/frm/sys/sysStaff.css" rel="stylesheet">
  	<script src="${pageContext.request.contextPath}/resource/js/jquery/plugin/My97DatePicker/WdatePicker.js"></script>
  	<script src="${pageContext.request.contextPath}/resource/js/jquery/plugin/datatables/js/jquery.dataTables.js"></script>
  	<script src="${pageContext.request.contextPath}/resource/js/jquery/plugin/jquery.ztree.all-3.5.min.js"></script>
  	<script src="${pageContext.request.contextPath}/resource/js/jquery/plugin/handlebars-v3.0.1.js"></script>
  </head>
  <script type="text/javascript">
		var hadPermission = {'search':true};
/* 		 <shiro:hasPermission name="sysOrgController/searchSysStaffById"> */
		 hadPermission.search = true;
	/* 	 </shiro:hasPermission> */
	</script>

<script type="text/javascript">
$(function($){

	// 后面构建btn 代码
	var btnModel = '    \
		{{#each func}}\
	    <button type="button" class="btn btn-{{this.type}} btn-sm" onclick="{{this.fn}}">{{this.name}}</button>\
	    {{/each}}';
	var template = Handlebars.compile(btnModel);
	// datatables
	searchTable = $("#searchTable").DataTable({
		"ordering": false,// 排序
		"serverSide": true,// 开启服务器模式
		"scrollX": true,// 横向滚动
		ajax: {
            "type": "POST",
            "url":'selectOrgUser.action',//请求路径
            "contentType": 'application/x-www-form-urlencoded; charset=UTF-8',
            "dataType":'json',
            "data":function(d){// 查询参数
            	d.code = $('#sysStaffCode').val();
            	d.name = $('#sysStaffName').val();
            	d.empCode = $('#sysStaffEmpCode').val();
            	d.account = $('#exampleInputName2').val();
            	d.orgId = $('#orgId').val();
            	return d;
            }
		},
		columns: [// 对应列
		    {"data": "staffId"},
            {"data": "staffCode"},
            {"data": "staffName"},
            {"data": "sex"},
            {"data": "mobilPhone"},
            {"data": "email"},
            {"data": "mobilPhone"},
            {"data": "loginName"},
            {"data": "status"},
            {"data": null}
        ],
        "columnDefs": [
			{// 所有列默认值
				"targets": "_all",
				"defaultContent": ''
			},
			{// 隐藏第一列
				"targets": 0,
				"visible": false
			},
			{
				targets: 3,
	            render: function (a, b, c, d) {
	                if('M' == c.sex){
	                	return '男';
	                }else{
	                	return '女';
	                }
	            }
			},
			{
				targets: 8,
				render: function (a, b, c, d){
					if('Y' == c.status)return '有效';else return '无效';
				}
			},
           {// 最后一列添加按钮
            targets: -1,
            render: function (a, b, c, d) {
            	var btnArray = new Array();
            	if(hadPermission.search){
            		btnArray.push({"name": "详细信息", "fn": "showEditPage(\'" + c.staffId + "\')", "type": "primary"});
            	}
                var context =
                {
                    func: btnArray
                };
                var html = template(context);
                return html;
            }
        }]
		,"dom": 'rt<"bottom"ip><"clear">' //生成样式
	});
})

// 查询
function search4Page(){
	searchTable.ajax.reload();
}

//详细信息展示
function showEditPage(id){

	$.post('searchSysStaffById.action',{'id':id},function(data){
		$('#statusStaffObjdiv').removeClass('HdClass');
		$("#hiddenId").val(id);
		$('#staffSearch').hide();
		$('#staffContainer').show();

//		$('#contentField').removeAttr('disabled');
		$('#updateBtn').show();
		// 展示人员信息
		var sysStaff = data.staffObj;
		for(var col in sysStaff){
			if(col == 'sex'){
				$("#sexStaffObj option[value='"+sysStaff[col]+"']").attr("selected",true);
			}else if(col == 'status'){
				$("#statusStaffObj option[value='"+sysStaff[col]+"']").attr("selected",true);
			}else{
				$('#'+col+'StaffObj').val(sysStaff[col]);
			}
		}

	});
}

function fnreturn(){
	$('#staffContainer').hide();
	$('#staffSearch').show();
}

//导出EXCEL
function exporExcelOrgUser(){
	var path = "exporExcelOrgUser.action";
    $('#exporExcelOrgUser').attr("action", path).submit();
}

</script>

  <body>
  	<!-- 查询 -->
  	<div class="headerDiv"></div>
  	<div class="container-fluid" id="staffSearch">
  		<div class="row">
  			<form action="" id="exporExcelOrgUser" class="form-inline" autocomplete="off" style="margin-bottom:10px">
  				<input type="hidden" name="orgId" id="orgId" value="${orgId}">
			  <div class="form-group">
			    <label for="sysStaffName">人员姓名</label>
			    <input type="text" class="form-control" name="name" id="sysStaffName" placeholder="人员姓名">
			  </div>
			  <div class="form-group">
			    <label for="exampleInputName2">人员账号</label>
			    <input type="text" class="form-control" name="account" id="exampleInputName2" placeholder="人员账号">
			  </div>

  			</form>
  			<div class="TwoButtondiv">
  				<button type="button" class="btn btn-info" onclick="search4Page();"><i class="ace-icon glyphicon glyphicon-search"></i>查询</button>
  				<shiro:hasPermission name="sysOrgController/exporExcelOrgUser">
  				<button type="button" class="btn btn-info" onclick="exporExcelOrgUser();"><i class="ace-icon glyphicon glyphicon-search"></i>导出</button>
  				</shiro:hasPermission>
  			</div>
  		</div>
  		<div class="row">
  			<!-- 列表 -->
  			<table id="searchTable" class="display" cellspacing="0" width="100%">
  				<thead>
  					<tr>
  						<th>id</th>
  						<th>人员编码</th>
  						<th>人员姓名</th>
  						<th>性别</th>
  						<th>电话号码</th>
  						<th>邮箱账号</th>
  						<th>手机号码</th>
  						<th>账号</th>
  						<th>人员状态</th>
  						<th>操作</th>
  					</tr>
  				</thead>
  				<tbody></tbody>
  			</table>
  		</div>
  	</div>

  	<!-- 添加修改 -->
  	<div class="container-fluid" id="staffContainer" style="display:none">
		<h4>
			人员信息
		</h4>
		<hr>
  		<div class="row">
  			<form class="form-horizontal" role="form" id="sysStaffObjectForm" action="javascript:;"  autocomplete="off">
	  						<fieldset id="staffField">
	  							<input type="hidden" name="id" id="idStaffObj">
								<div class="form-group col-sm-6">
									<label class="col-sm-3 control-label no-padding-right" for="codeStaffObj">人员编码</label>
									<div class="col-sm-8">
										<input type="text" name="code" id="codeStaffObj" placeholder="人员编码" class="col-xs-10 col-sm-5 form-control" required autofocus>
									</div>
								</div>
								<div class="form-group col-sm-6">
									<label class="col-sm-3 control-label no-padding-right" for="nameStaffObj">人员姓名</label>
									<div class="col-sm-8">
										<input type="text" name="name" id="nameStaffObj" placeholder="人员姓名" class="col-xs-10 col-sm-5 form-control" required>
									</div>
								</div>
								<div class="form-group col-sm-6">
									<label class="col-sm-3 control-label no-padding-right" for="personTypeStaffObj">人员类型</label>
									<div class="col-sm-8">
										<input type="text" name="personType" id="personTypeStaffObj" placeholder="人员类型" class="col-xs-10 col-sm-5 form-control" required>
									</div>
								</div>
								<div class="form-group col-sm-6">
									<label class="col-sm-3 control-label no-padding-right" for="empCodeStaffObj">身份证号</label>
									<div class="col-sm-8">
										<input type="text" name="empCode" id="empCodeStaffObj" placeholder="身份证号" class="col-xs-10 col-sm-5 form-control" required>
									</div>
								</div>
								<div class="form-group col-sm-6 HdClass" id="statusStaffObjdiv">
									<label class="col-sm-3 control-label no-padding-right" for="statusStaffObj">人员状态</label>
									<div class="col-sm-8">
										<select class="chosen-select col-xs-6 col-sm-4 form-control" name="status" id="statusStaffObj"
											data-placeholder="人员状态">
											<option value="Y">有效</option>
											<option value="N">无效</option>
										</select>
									</div>
								</div>
								<div class="form-group col-sm-6">
									<label class="col-sm-3 control-label no-padding-right" for="sexStaffObj">性别</label>
									<div class="col-sm-8">
										<select class="chosen-select col-xs-6 col-sm-4 form-control" name="sex" id="sexStaffObj"
											data-placeholder="性别">
											<option value="M">男</option>
											<option value="W">女</option>
										</select>
									</div>
								</div>
								<div class="form-group col-sm-6">
									<label class="col-sm-3 control-label no-padding-right" for="originalHireDateStaffObj">入职日期</label>
									<div class="col-sm-8">
										<input type="text" name="originalHireDate" id="originalHireDateStaffObj" placeholder="入职日期"
										onclick="WdatePicker({dateFmt:'yyyy-MM-dd'})"
										class="col-xs-10 col-sm-5 form-control" readonly="readonly" required>
									</div>
								</div>
								<div class="form-group col-sm-6">
									<label class="col-sm-3 control-label no-padding-right" for="postcodeStaffObj">邮政编码</label>
									<div class="col-sm-8">
										<input type="text" name="postcode" id="postcodeStaffObj" placeholder="邮政编码" class="col-xs-10 col-sm-5 form-control" required>
									</div>
								</div>
								<div class="form-group col-sm-6">
									<label class="col-sm-3 control-label no-padding-right" for="mailAddrStaffObj">通信地址</label>
									<div class="col-sm-8">
										<input type="text" name="mailAddr" id="mailAddrStaffObj" placeholder="通信地址" class="col-xs-10 col-sm-5 form-control" required>
									</div>
								</div>
								<div class="form-group col-sm-6">
									<label class="col-sm-3 control-label no-padding-right" for="phoneStaffObj">电话号码</label>
									<div class="col-sm-8">
										<input type="text" name="phone" id="phoneStaffObj" placeholder="电话号码" class="col-xs-10 col-sm-5 form-control" required>
									</div>
								</div>
								<div class="form-group col-sm-6">
									<label class="col-sm-3 control-label no-padding-right" for="emailStaffObj">邮箱</label>
									<div class="col-sm-8">
										<input type="text" name="email" id="emailStaffObj" placeholder="邮箱" class="col-xs-10 col-sm-5 form-control" required>
									</div>
								</div>
								<div class="form-group col-sm-6">
									<label class="col-sm-3 control-label no-padding-right" for="mobilPhoneStaffObj">手机号码</label>
									<div class="col-sm-8">
										<input type="text" name="mobilPhone" id="mobilPhoneStaffObj" placeholder="手机号码" class="col-xs-10 col-sm-5 form-control" required>
									</div>
								</div>
								<div class="form-group col-sm-6">
									<label class="col-sm-3 control-label no-padding-right" for="accountStaffObj">账号</label>
									<div class="col-sm-8">
										<input type="text" name="account" id="accountStaffObj" placeholder="账号" class="col-xs-10 col-sm-5 form-control" required>
									</div>
								</div>
								<div class="form-group col-sm-6">
									<label class="col-sm-3 control-label no-padding-right" for="passwdStaffObj">密码</label>
									<div class="col-sm-8">
										<input type="text" name="passwd" id="passwdStaffObj" placeholder="密码" class="col-xs-10 col-sm-5 form-control">
									</div>
								</div>
							</fieldset>

	  					</form>

				<div class="clearfix form-actions">
					<center>
						<button class="btn btn-info" type="button" id="backBtn" onclick="fnreturn();">
							<i class="ace-icon fa fa-check bigger-110"></i>
							返回
						</button>
					</center>
				</div>
				<input type="hidden" id="hiddenId"/>
  		</div>
  	</div>
  </body>
</html>
